<template>
  <div class="login">
    <div class="con">
      <div class="con-box">
        <img
          src="../../../public/img/pic/logo/orange@3x.png"
          alt=""
          class="con-img"
        />
        <p class="con-title">优质甄选 高枕无忧</p>
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="username">
              <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
          {
            min: 3,
            max: 6,
            message: "请您输入正确的密码格式",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          {
            min: 3,
            max: 8,
            message: "请您输入正确的密码格式",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    submitForm(ruleForm) {
      this.$refs['ruleForm'].validate((valid) => {
        if(!valid){
          alert('您的账号或密码错误')
        }else {
          this.$api.psotuserlogin(this.ruleForm).then((res)=>{
            if(res.data.code == 200){
              localStorage.setItem('userInfo',JSON.stringify(res.data.list))
              this.$router.push('/')
            }else {
              alert('您的账号或密码错误')
              return false
            }
          })
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: #ff6a50;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: right;
  .con {
    width: 700px;
    height: 540px;
    background: url("../../../public/img/pic/bg/login@3x.png");
    background-size: 100% 100%;
    margin-right: 200px;
    position: relative;
    .con-box {
      position: absolute;
      top: 90px;
      right: 45px;
      width: 45%;
      height: 80%;
      .con-title {
        text-align: center;
        letter-spacing: 12px;
        color: #888;
        margin-top: 20px;
      }
    }
    .form {
      margin-top: 40px;
      // margin: ;
    }
    input {
      width: 100%;
      height: 100%;
      outline: none;
      padding-left: 10px;
      border: 0;
      background: #fff6f400;
    }
    .con-img {
      width: 100%;
      height: 80px;
    }
  }
}
::v-deep .el-button {
  width: 100%;
  background-color: #ff6a50;
  border: none;
  margin-top: 20px;
  border-radius: 20px;
}
::v-deep .el-input {
  width: 80%;
}
</style>